<template>
  <yt-page title="隐患排查" scroll :rightData="rightData" :input="input" @change="refresh">
    <yt-collapse v-model="active" :list="currentItems" label="enterpriseName">
      <div slot-scope="props">
        <yt-cell border="none" label="未整改" isLink @click="goListPage(props.enterpriseId, 1)">
          <span class="c-blue"> {{ props.state['1'] || 0 }} 条</span>
        </yt-cell>
        <yt-cell border="none" label="已整改" isLink @click="goListPage(props.enterpriseId, 2)">
          <span class="c-blue"> {{ props.state['2'] || 0 }} 条</span>
        </yt-cell>
        <yt-cell border="none" :label="v.D_text" v-for="(v, index2) in dic" :key="index2" isLink @click="goListPage(props.enterpriseId, null, v.D_code)">
          <span class="c-blue">{{getValue(v, props.top)}}</span>
        </yt-cell>
        <yt-cell border="none" label="一般隐患" isLink @click="goListPage(props.enterpriseId, null, null, 1)">
          <span class="c-blue"> {{ props.level['1'] || 0 }} 条</span>
        </yt-cell>
        <yt-cell border="none" label="重大隐患" isLink @click="goListPage(props.enterpriseId, null, null, 2)">
          <span class="c-blue"> {{ props.level['2'] || 0 }} 条</span>
        </yt-cell>
      </div>
    </yt-collapse>
  </yt-page>
</template>

<script>
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import gql from './index.gql'

const LEVEL = [
  {
    D_text: '一般隐患',
    D_code: '1'
  },
  {
    D_text: '重大隐患',
    D_code: '2'
  }
]
const STATE = {
  1: '未整改',
  3: '已整改'
}
export default {
  data() {
    return {
      LEVEL,
      STATE,
      input: false,
      rightData: [
        {
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.input = !this.input
          }
        }
      ],
      active: [],
      items: [],
      dic: [],
      search: ''
    }
  },
  computed: {
    currentItems() {
      if (!this.search) return this.items
      return this.items.filter(item => {
        return item.enterpriseName.indexOf(this.search) > -1
      })
    }
  },
  activated() {
    if (this.$router.$isBack) return
    this.fetchData()
  },
  methods: {
    getValue(v, top) {
      if (!top) return '0 条'
      return (top[v.D_code] || 0) + ' 条'
    },
    async fetchData() {
      let p = [
        commonApi.search('ent_enterprise'),
        commonApi.dictionary('hierarchy'),
        commonApi.gql(gql)
      ]
      let [entList, dic, { data }] = await this.$Loading(...p)
      let obj = _.zipObject(data.keys, data.values)
      let items = []
      _.forIn(obj, ({ state, top, level }, key) => {
        let ent = entList.find(v => v.id === key)
        let item = {
          enterpriseId: ent ? ent.id : '',
          enterpriseName: ent ? ent.EnterpriseName : '',
          state: _.zipObject(state.keys, state.values) || {},
          top: _.zipObject(top.keys, top.values) || {},
          level: _.zipObject(level.keys, level.values) || {}
        }
        items.push(item)
      })
      this.items = items
      this.dic = dic
    },
    goListPage(enterpriseId, state, listLevel, HiddenDangerLevel) {
      let a = state ? { state: state } : {}
      let b = listLevel ? { list_level: listLevel } : {}
      let c = HiddenDangerLevel
        ? { Hidden_danger_level: HiddenDangerLevel }
        : {}
      let d = { enterprise_name: enterpriseId }
      let param = { ...a, ...b, ...c, ...d }
      this.$router.$push({ path: '/dangerCheck/list', query: param })
    },
    refresh(search) {
      this.search = search
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .flex
  display flex
  justify-content space-between
  padding 10px
  border-bottom 0.5px solid #f5f5f5

>>> .yt-cell
  background transparent

>>> .yt-cell-label
  padding 0
</style>
